<template>
	<hx-navbar :is-back="false" title="支付结果"></hx-navbar>
	<view v-if="!loading">
		<view class="pay-result-header">
			<u-icon color="#19be6b" name="checkmark-circle" :size="150"></u-icon>
			<view class="title">订单支付成功</view>
		</view>
		<view class="pay-result-content">
			<view class="item">
				<view> 订单号 </view>
				<view> {{ state.order.orderNo }} </view>
			</view>
			<view class="item">
				<view> 支付方式 </view>
				<view> {{ state.order.paymentType == '0' ? '0元支付' : state.order.paymentType == '1' ? '微信支付' :
					state.order.paymentType == '2' ? '支付宝支付' : '' }} </view>
			</view>
			<view class="item">
				<view> 支付金额 </view>
				<view class="text-price" style="color: red"> {{ state.order.paymentPrice }} </view>
			</view>
		</view>
		<view class="pay-result-foot">
			<u-button shape="circle" style="margin: 30rpx 60rpx" :plain="true" @click="goHome">返回首页</u-button>
			<u-button shape="circle" style="margin: 0 60rpx 30rpx 60rpx" type="primary" @click="goOrder">查看订单</u-button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { getById } from '@/api/order/orderInfo';
const loading = ref(true);
const state = reactive<{ order: any }>({
	order: {},
});
onLoad((options) => {
	getOrder(options?.id);
});
const getOrder = (id: string) => {
	getById(id).then((response) => {
		loading.value = false;
		state.order = response.data;
	});
};
const goHome = () => {
	uni.$hxRouter.push({
		type: 'reLaunch',
		url: 'pages/home/index',
	});
};
const goOrder = () => {
	uni.$hxRouter.push({url:'/pages/order/order-detail/index?id=' + state.order.id});
};
</script>

<style lang="scss">
.pay-result-header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 30rpx;

	.title {
		padding-top: 20rpx;
		font-weight: 700;
	}
}

.pay-result-content {
	margin: 50rpx 80rpx;

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
	}
}

.pay-result-foot {
	margin-top: 40rpx;
}
</style>
